<script setup>
  // 1. 导入count的仓库
  import { useCountStore } from '@/stores/counter.js'
  // 2. 获取store对象
  const store = useCountStore()
</script>
<template>
  <view class="counter">
    <button class="button" type="primary" @click="store.decrement">-</button>
    <input class="input" type="text" v-model="store.count" />
    <button class="button" type="primary" @click="store.increment">+</button>
  </view>
</template>

<style lang="scss" scoped>
  .counter {
    display: flex;
    padding: 100rpx;
  }

  .input {
    flex: 1;
    height: 96rpx;
    text-align: center;
    border: 2rpx solid #eee;
    box-sizing: border-box;
  }

  .button {
    width: 100rpx;
    margin: 0;

    &:first-child {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
    &:last-child {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }
  }
</style>
